<template>
  <div>
    <vue-esign style="border: 1px black solid" ref="esign" :width="250" :height="150" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>
  </div>

</template>

<script>
export default {
  name: "Esign",

  data () {
    return {
      lineWidth: 2,
      lineColor: '#000000',
      bgColor: 'rgba(255,255,255,0)', //白色透明背景
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    handleReset () {
      this.$refs['esign'].reset() //清空画布
    },
    handleGenerate () {
      this.$refs['esign'].generate().then(res => {
        this.resultImg = res // 得到了签字生成的base64图片
        console.log(this.resultImg);
      }).catch(err => { //  没有签名，点击生成图片时调用
        this.$message({
          message: err + ' 未签名！',
          type: 'warning'
        })
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    },

    // 将base64，转换成图片
    base64ImgtoFile(dataurl, filename = 'file') {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },
  }
}
</script>

<style scoped>

</style>